<template>
  <div>
    <div class="tender">
      <div class="phoneNum_top">
        <span class="biao"></span>
        <span>未中标信息</span>
      </div>
      <div>
        <div>
          <span class="mr10">
            <el-input
              style="width: 220px"
              v-model="zhaobiao.offerings"
              placeholder="请输入产品名称"
              @change="offeringsClick"
            />
          </span>
          <span class="mr10">
            <el-input
              style="width: 200px"
              v-model="zhaobiao.boosName"
              placeholder="请输入公司名称"
              @change="boosNameClick"
            />
          </span>
          <span class="mr10">
            <el-cascader
              v-model="proPtions"
              placeholder="请选择项目地区"
              :options="options"
              :props="props"
              collapse-tags-tooltip
              collapse-tags
              clearable
              @change="recognize6"
            />
          </span>
          <span class="mr10">
            <el-cascader
              v-model="bulletinLis"
              placeholder="请选择公告类型"
              :options="opbulletin"
              :props="propssss"
              collapse-tags
              collapse-tags-tooltip
              clearable
              @change="announcement"
            />
          </span>
          <!-- <span class="mr10">
                        <el-select v-model="zhaobiao.bulletin" class="m-2" multiple collapse-tags clearable
                            placeholder="全部公告类型" style="width: 200px" @change="announcement">
                            <el-option v-for="item in gGoptions" :key="item.infoid" :label="item.infoname"
                                :value="item.infoid" />
                        </el-select>
                    </span>
                    <span class="mr10">
                        <el-select v-model="zhaobiao.bidding" class="m-2" multiple collapse-tags clearable
                            placeholder="全部招标方式" style="width: 240px" @change="announcement1">
                            <el-option v-for="item in gGzhaobfabgs" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </span> -->
          <span class="mr10">
            <el-date-picker
              style="width: 220px"
              v-model="times"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
              format="YYYY/MM/DD"
              value-format="x"
              @change="timeClick"
            />
          </span>
        </div>
        <div style="margin-top: 10px">
          <span>
            <el-select
              v-model="zhaobiao.Boos"
              class="m-2"
              multiple
              collapse-tags
              clearable
              placeholder="全部招标公司类型"
              style="width: 200px"
              @change="announcement2"
            >
              <el-option
                v-for="item in gGoleixing"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>
        </div>
      </div>
    </div>

    <el-table
      :data="signalsRadio1.weizhongbiaoLiss"
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#FCE2E2', color: '#333' }"
    >
      <el-table-column label="公告类型" align="center">
        <template #default="{ row }">
          <span
            style="
              padding: 5px 10px;
              background-color: #f43107;
              color: #ffffff;
              border-radius: 5px;
            "
            >{{ informations(row.infoid) }}</span
          >
        </template>
      </el-table-column>

      <el-table-column label="公告标题" align="center" width="220">
        <template #default="{ row }">
          <span @click="boosBx(row.nid)"> {{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="招标方式" align="center">
        <template #default="{ row }">
          {{ row.tags[0] }}
        </template>
      </el-table-column>
      <el-table-column label="产品" align="center">
        <template #default="{ row }">
          <div style="display: flex; justify-content: center">
            <span
              v-if="row.products != null"
              class="yincang"
              style="margin-right: 15px"
              v-for="i in row.products.slice(0, 1)"
              :key="i.doc_count"
              >{{ i.names[0] }}</span
            >
            <div
              v-if="row.products != null && row.products.length > 1"
              class="more"
              @click="moreGd(row.products)"
            >
              更多
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="招标公司" align="center" width="200">
        <template #default="{ row }">
          <span @click="boosXq(row.zbdw)"> {{ row.xmdw }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目地区" align="center">
        <template #default="{ row }">
          <span style="color: #707070">
            {{ diqu(row.provinceid) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center">
        <template #default="{ row }">
          <div
            v-if="row.jg > '0'"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fe8d03;
            "
          >
            <img
              style="width: 14px; margin-right: 5px"
              src="@/assets/img/money.png"
              alt=""
            />
            {{ money(row.jg) }}
          </div>
          <div
            v-if="row.jg == '0'"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fe8d03;
            "
          >
            <img
              style="width: 14px; margin-right: 5px"
              src="@/assets/img/money.png"
              alt=""
            />
            {{ "见详情" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" align="center">
        <template #default="{ row }">
          <span style="color: #707070">
            {{ timestamp(row.release_time) }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <Pagination />
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="产品列表"
    width="30%"
    :before-close="handleClose"
  >
    <div class="infordisplay">
      <span class="cate_label" v-for="item in boxes">{{ item.names[0] }}</span>
    </div>
  </el-dialog>
</template>

<script setup>
import domData from "@/utils/json/dom.json";
import "@/assets/com/com.scss";
import { reactive, ref } from "vue";
import Pagination from "../pagin/index.vue";
import { useRadio1Store } from "@/pain/search/search";
import { getCaricatureApi, getInfomationchild } from "@/Api/shoop/index.js";
import { timestamp, diqu, money } from "@/utils/index";
import { useRouter } from "vue-router";
const router = useRouter();
const signalsRadio1 = useRadio1Store();
let times = ref([]);
const dialogVisible = ref(false);
let zhaobiao = reactive({
  offerings: "",
  boosName: "",
  leave: [],
  market: [],
  quarter: [],
  bulletin: [],
  // bidding: [],
  time: [
    {
      oneTime: "",
      twoTime: "",
    },
  ],
  Boos: [],
});
signalsRadio1.weizhongbaioTj = zhaobiao;
let gGoptions = ref([]);
const props = { multiple: true, checkStrictly: true };
const propssss = { multiple: true };

const getInformation = () => {
  getCaricatureApi().then((res) => {
    let {
      data: { data },
    } = res;
    gGoptions.value = data;
  });
};
getInformation();
let boxes = ref([]);
const moreGd = (gd) => {
  dialogVisible.value = true;
  boxes.value = gd;
};
const handleClose = (done) => {
  done();
};
let informations = (id) => {
  let infor = gGoptions.value.filter((res) => res.infoid == id);
  return infor[0]?.infoname;
};
const offeringsClick = () => {
  signalsRadio1.getcompany_detail_wzbs();
};
const boosNameClick = () => {
  signalsRadio1.getcompany_detail_wzbs();
};

const announcement2 = () => {
  signalsRadio1.getcompany_detail_wzbs();
};
let options = [];
let proPtions = ref([]);
let children2 = ref([]);
let children3 = ref([]);
let diquArr = ref([]);
domData.forEach((aaa) => {
  diquArr.value.push(aaa);
});
options = domData.filter((item) => item.parent === 100000);
domData.forEach((item) => {
  Reflect.set(item, "value", item.label);
});
options.forEach((element) => {
  children2 = domData.filter((word) => element.adcode == word.parent);
  Reflect.set(element, "children", children2);
  // children2.forEach((ele) => {
  //     children3 = domData.filter((word) => ele.adcode == word.parent);
  //     Reflect.set(ele, "children", children3);
  // });
});
let state = reactive({
  newList: [],
  newArr: [],
  optionsArr: [],
  children2Arr: [],
  children3Arr: [],
});
const recognize6 = () => {
  console.log("valie", proPtions.value);
  proPtions.value.forEach((i) => {
    i.forEach((l) => {
      state.newList.push(l);
    });
  });

  diquArr.value.forEach((j) => {
    state.newList.filter((words) => {
      if (j.label == words) {
        state.newArr.push(j);
      }
    });
  });

  state.newArr = Array.from(new Set(state.newArr));
  options.forEach((j1) => {
    state.newArr.filter((words) => {
      if (j1.adcode == words.adcode) {
        state.optionsArr.push({
          id: j1.adcode,
          name: j1.label,
        });
      }
      return;
    });
  });
  options.forEach((element) => {
    children2 = domData.filter((word) => element.adcode == word.parent);
    children2.forEach((ele) => {
      state.newArr.filter((words1) => {
        if (ele.adcode == words1.adcode) {
          state.children2Arr.push({
            id: ele.adcode,
            name: ele.label,
          });
        }
      });
      children3 = domData.filter((word) => ele.adcode == word.parent);
      children3.forEach((lll) => {
        state.newArr.filter((words2) => {
          if (lll.adcode == words2.adcode) {
            state.children3Arr.push({
              id: lll.adcode,
              name: lll.label,
            });
          }
        });
      });
    });
  });
  zhaobiao.leave = Array.from(new Set(state.optionsArr));
  zhaobiao.market = Array.from(new Set(state.children2Arr));
  zhaobiao.quarter = Array.from(new Set(state.children3Arr));
  signalsRadio1.getcompany_detail_wzbs();
};

let opbulletin = ref([]);
const getInfomationchilds = () => {
  getInfomationchild().then((res) => {
    opbulletin.value = res.data.data;
  });
};
getInfomationchilds();
let bulletinLis = ref([]);
const announcement = () => {
  zhaobiao.bulletin = [];
  bulletinLis.value.forEach((res) => {
    zhaobiao.bulletin.push(res[1]);
  });
  signalsRadio1.getcompany_detail_wzbs();
};

// 全部招标公司类型
let gGoleixing = [
  {
    id: "1",
    name: "国有企业",
  },
  {
    id: "2",
    name: "通讯运营商",
  },
  {
    id: "3",
    name: "军队",
  },
  {
    id: "4",
    name: "银行",
  },
  {
    id: "5",
    name: "证券",
  },
  {
    id: "6",
    name: "保险",
  },
  {
    id: "7",
    name: "民营企业",
  },
  {
    id: "8",
    name: "医院",
  },
  {
    id: "9",
    name: "政府及事业单位",
  },
  {
    id: "10",
    name: "学校",
  },
  {
    id: "11",
    name: "其他",
  },
];
// 时间
const timeClick = (value) => {
  console.log(value);
  if (value == null) {
    signalsRadio1.getcompany_detail_wzbs();
    return;
  }
  const dateObject1 = new Date(value[0]);
  let seconds1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(value[1]);
  let seconds2 = Math.floor(dateObject2.getTime() / 1000);
  zhaobiao.time[0] = {
    oneTime: seconds1,
    twoTime: seconds2,
  };
  signalsRadio1.getcompany_detail_wzbs();
};

const boosBx = (id) => {
  const href = router.resolve({
     path: `/searchInfo`,
      query: {
          id: nid,
          // name: event,
        },
  });
  window.open(href.href, "_blank");
};
const boosXq = (data) => {
  const href = router.resolve({
    path: "/disposition",
    query: {
      id: 8,
      name: data,
    },
  });
  window.open(href.href, "_blank");
};

// signalsRadio1.getcompany_detail_wzbs()
</script>

<style lang="scss" scoped>
.yincang {
  width: 56px;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.infordisplay {
  display: flex;
  flex-wrap: wrap;
  // max-height: 400px;
  overflow: auto;
  padding: 16px 24px;

  .cate_label {
    margin-right: 10px;
    margin-bottom: 8px;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 14px;
    background: rgba(0, 143, 147, 0.1);
    color: #f43107;
  }
}

.mr10 {
  margin-right: 10px;
}

.phoneNum {
  padding-top: 20px;

  .phoneNum_top {
    display: flex;
    justify-content: space-between;

    .biao {
      width: 4px;
      height: 16px;
      margin-right: 10px;
      background-color: #f43107;
      border-radius: 10px;
    }
  }

  .phoneNum_box {
    display: flex;
    align-items: center;
    padding-bottom: 5px;

    .photo_xbox {
      width: 170px;
      height: 80px;
      margin-right: 20px;
      margin-top: 20px;
      padding: 20px 0 0 20px;
      background-color: #ffffff;
      box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.16);
      border-radius: 8px;

      .phoneNum_name {
        margin-bottom: 15px;
      }

      .photo_size {
        margin-left: 10px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333;
      }
    }
  }
}

.tender {
  margin: 30px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #dddddd;

  .phoneNum_top {
    display: flex;
    margin-bottom: 20px;
  }
}

.biao {
  width: 4px;
  height: 16px;
  margin-right: 10px;
  background-color: #f43107;
  border-radius: 10px;
}
</style>
